<template>
  <view class="portfolio_container">
    <!-- banner -->
    <div class="header" v-if="bannerList.length">
      <swiper class="swiper" autoplay :interval="5000" circular>
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.imageUrl" />
        </swiper-item>
      </swiper>
    </div>

    <div class="goodsList">
      <div class="item" v-for="(item, index) in goodsList" :key="index">
        <div class="title">
          <span class="singleRowEllipsis">{{ item.goodsName }}</span>
        </div>
        <div class="item_goods">
          <div v-for="(i, j) in item.skuList" :key="j">
            <image v-if="item.inform" :src="item.inform" class="img inform_announcement"></image>
            <image class="img" :class="item.quantity ? '' : 'sellOut_container-img'"
              :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'" />
            <p class="goodsName singleRowEllipsis">{{ i.goodsName }}</p>
            <p class="price" v-if="hasToken() && i.price">
              <span>￥</span>
              <span>{{ i.price.toFixed(2) }}</span>
              <span>x{{ i.num }}</span>
            </p>
            <p class="price" v-if="hasToken() && !i.price">资质审核可见</p>
            <p class="price" v-if="!hasToken()">登录可见</p>
          </div>
        </div>
        <div class="joinCarts">
          <div>
            <p>
              共<span>{{ item.skuList.length }}</span>件商品
            </p>
            <p v-if="hasToken() && item.price">
              总计：<span>{{ item.price.toFixed(2) }}</span>
            </p>
            <p v-if="hasToken() && !item.price" class="loginSow">资质审核可见</p>
            <p v-if="!hasToken()" class="loginSow">登录可见</p>
            <p v-if="hasToken() && item.price" @click="addShoppingCart(item)">加入购物车</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 跳转购物车 置顶 -->
    <div class="footer">
      <div class="car_top" @click="goToCar">
        <uni-icons type="cart" size="30" color="#fff"></uni-icons>
      </div>
      <div class="car_bottom" @click="backTop">
        <uni-icons type="arrow-up" size="30" color="#fff"></uni-icons>
      </div>
    </div>
    <!-- 弹框 -->
    <!-- 加入购物车 -->
    <div class="bgc" @click.stop="addCar = false" v-if="addCar">
      <div class="addCar" @click.stop="">
        <div class="addNum">
          <div @click.stop="num > 1 ? num-- : ''"><i></i></div>
          <input type="number" v-model="num" @change="changeNum" @click.stop="" />
          <div @click.stop="num++"><span></span><span></span></div>
        </div>
        <div class="sure" @click="sureNum()">确定</div>
      </div>
    </div>
  </view>
</template>

<script>
import { getAppBanner, getPortfolioList, getCarts } from '@/api/activity/activity.js'

export default {
  data () {
    return {
      bannerList: [],
      goodsList: [],
      addCar: false,
      currentGoods: '',
      pageNumber: 1,
      pageSize: 10,
      num: 1,
      pages: ''
    }
  },
  onLoad () {
    this.getBanner()
    this.getList()
  },
  onPullDownRefresh () {
    this.pageNumber = 1
    this.getBanner()
    this.getList()
    uni.stopPullDownRefresh()
  },
  onReachBottom () {
    this.getData()
  },
  methods: {
    getBanner () {
      getAppBanner({
        pageSign: 'PORTFOLIO'
      }).then(res => {
        this.bannerList = res.data
      })
    },
    getList () {
      getPortfolioList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        this.goodsList = res.data.records
        this.pages = res.data.pages
      })
    },
    getData () {
      if (this.pages > this.pageNumber) {
        this.pageNumber++
        getPortfolioList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        }).then(res => {
          this.goodsList.push(...res.data.records)
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '没有了',
          mask: true
        })
      }
    },
    addShoppingCart (item) {
      this.addCar = true
      this.currentGoods = item
    },
    changeNum () {
      this.num = parseInt(this.num) ? parseInt(this.num) : 1
    },
    sureNum () {
      getCarts({
        num: this.num,
        skuId: this.currentGoods.id
      })
        .then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: 'none',
              title: '成功',
              mask: true
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg,
              mask: true
            })
          }
        })
        .finally(() => {
          this.addCar = false
        })
    },
    goToCar () {
      uni.switchTab({
        url: '/pages/shoppingCarts/index'
      })
    },
    backTop () {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.portfolio_container {
  background: #f3f2ff;

  .header {
    .swiper {
      height: 458.3rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .goodsList {
    padding-top: 44rpx;
    padding-bottom: 40rpx;

    .item {
      background: #346ce5;
      border-radius: 11rpx;
      margin: 25rpx;
      padding-top: 6rpx;

      .title {
        width: 100%;
        text-align: center;
        padding-top: 26rpx;
        padding-bottom: 33rpx;
        background: #71a4ff;
        border-radius: 11rpx 11rpx 0 0;

        span {
          display: inline-block;
          max-width: 85%;
          height: 64rpx;
          line-height: 64rpx;
          background: linear-gradient(
            180deg,
            rgba(52, 108, 229, 0.85),
            rgba(126, 217, 255, 0.85)
          );
          border-radius: 32rpx;
          color: #fff;
          font-size: 33rpx;
          font-weight: 500;
          padding: 0 22rpx;
        }
      }

      .item_goods {
        display: grid;
        grid-template-columns: repeat(3, 217rpx);
        grid-gap: 14rpx;
        padding: 0 14rpx;
        background: #71a4ff;

        div {
          width: 217rpx;
          height: 317rpx;
          background: #ffffff;
          border-radius: 11rpx;

          .img {
            width: 167rpx;
            height: 167rpx;
            background: #ffffff;
            margin: 24rpx 25rpx;
          }

          .goodsName {
            width: 80%;
            line-height: 1;
            font-size: 24rpx;
            font-weight: 400;
            color: #000000;
            margin-left: 16rpx;
          }

          .price {
            margin-left: 17rpx;
            margin-top: 17rpx;
            color: #ef231b;
            font-size: 25rpx;

            span:nth-child(2) {
              font-size: 32rpx;
            }

            span:nth-child(3) {
              font-size: 21rpx;
              color: rgba($color: #000000, $alpha: 0.6);
              float: right;
              margin-top: 12rpx;
              margin-right: 15rpx;
            }
          }
        }
      }

      .joinCarts {
        background: #ffffff;
        border-radius: 0rpx 0rpx 11rpx 11rpx;
        background: #71a4ff;
        padding-top: 45rpx;
        padding-bottom: 7rpx;

        div {
          width: 100%;
          height: 92rpx;
          background: #ffffff;
          border-radius: 0 0 11rpx 11rpx;

          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;

          p:nth-child(1) {
            font-size: 21rpx;
            margin-left: 25rpx;

            span {
              color: #ef231b;
            }
          }

          p:nth-child(2) {
            font-size: 25rpx;
            margin-left: 58rpx;

            span {
              font-size: 33rpx;
              color: #ef231b;
            }
          }

          p:nth-child(3) {
            width: 171rpx;
            height: 57rpx;
            line-height: 57rpx;
            background: linear-gradient(
              177deg,
              rgba(126, 217, 255, 0.85),
              rgba(52, 108, 229, 0.85)
            );
            border-radius: 11rpx;
            text-align: center;
            font-size: 25rpx;
            font-weight: 500;
            color: #fefefe;
            margin-right: 14rpx;
          }

          .loginSow {
            font-weight: 500;
            color: #ef231b;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    left: 25rpx;
    bottom: 27.78rpx;
    z-index: 3;

    .car_top {
      width: 93.06rpx;
      height: 93.06rpx;
      background: #aeaeae;
      border-radius: 50%;
      text-align: center;
      line-height: 96rpx;
      margin-bottom: 20.83rpx;
    }

    .car_bottom {
      width: 93.06rpx;
      height: 93.06rpx;
      background: #aeaeae;
      border-radius: 50%;
      text-align: center;
      line-height: 96rpx;
    }
  }

  .bgc {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;

    .addCar {
      position: fixed;
      top: 50%;
      left: 50%;
      background: #ffffff;
      border-radius: 11rpx;
      z-index: 1000;
      width: 500rpx;
      height: 302rpx;
      transform: translate(-50%, -50%);

      .addNum {
        display: flex;
        justify-content: space-between;
        margin: 69.44rpx;
        margin-bottom: 47.22rpx;

        div {
          display: inline-block;
          width: 58rpx;
          height: 58rpx;
          border: 1px solid #2871fc;
          border-radius: 8rpx;
          position: relative;

          i {
            display: inline-block;
            width: 31rpx;
            height: 1rpx;
            background: #2871fc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          span:nth-child(1) {
            display: inline-block;
            width: 31rpx;
            height: 1rpx;
            background: #2871fc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          span:nth-child(2) {
            display: inline-block;
            width: 1rpx;
            height: 31rpx;
            background: #2871fc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        input {
          display: block;
          width: 201rpx;
          height: 58rpx;
          border: 1px solid #2871fc;
          border-radius: 8rpx;
          color: #ef231b;
          text-align: center;
        }
      }

      .sure {
        width: 326rpx;
        height: 58rpx;
        line-height: 58rpx;
        background: #2871fc;
        border-radius: 29rpx;
        font-size: 29rpx;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
